<template>
  <div class="account">
    <div class="account_nav flex">
      <p
        v-for="(list,index) in list_nav"
        :key="index"
        @click="toggle(list.id)"
        :class="active_id==list.id?'active_nav':''"
      >{{list.name}}</p>
    </div>
    <div class="accont_cont" v-if="active_id==0&&ishowLi==false">
      <div class="flex">
        <div class="flex">
          <img src="../../assets/main_over.png" alt />
          登录密码&nbsp;&nbsp;|&nbsp;&nbsp;
          <span
            style="color:#dfd4d4"
          >互联网账号存在被盗风险，建议您定期更换密码以保护账户安全。</span>
        </div>
        <p @click="editpasss">修改</p>
      </div>
      <div class="flex">
        <div class="flex">
          <img src="../../assets/main_over.png" alt />
          手机验证&nbsp;&nbsp;|&nbsp;&nbsp;
          <span style="color:#dfd4d4">您绑定的手机号：{{phone}}，</span>
          <span style="color:#dfd4d4">如已丢失或停用，请立即更换，避免账号被盗</span>
        </div>
        <p @click="editphonee">修改</p>
      </div>
    </div>
    <!-- 修改密码 -->
    <div class="accont_cont2" v-if="active_id==0&&editpass==true">
      <div class="old_pass flex">
        <div
          v-for="(list,index) in oldPass_list"
          :key="index"
          :class="active_oldPass==list.id?'activeBg_p':''"
          @click="click_toggle()"
        >{{list.name}}</div>
      </div>
      <div class="old_pass_input" style="margin-top:29px;" v-if="active_oldPass==0">
        <input type="password" placeholder="请输入原密码" v-model="old_pass" />
      </div>
      <div class="old_pass_input" style="margin-top:29px;" v-if="active_oldPass==1">
        <input type="password" placeholder="请悄悄的输入新密码" v-model="new_pass" />
      </div>
      <div class="old_pass_input flex" v-if="active_oldPass==0||active_oldPass==1">
        <input type="text" placeholder="请输入图形码" v-model="old_pass_code" />
        <div @click="refreshCode" class="code_img">
          <SIdentify :identifyCode="identifyCode"></SIdentify>
        </div>
      </div>
      <div class="sumbit_pass" @click="sumbit_pass" v-if="active_oldPass==0||active_oldPass==1">提交</div>
      <div class="edit_success" v-if="active_oldPass==2">
        <img src="../../assets/edit_over.png" alt />
        <p>登录密码修改成功</p>
      </div>
      <div class="pass_tip">遇到问题，可拨打客服电话：400-995-1919</div>
    </div>
    <!-- 修改手机号 -->
    <div class="accont_cont2" v-if="active_id==0&&editphone==true">
      <div class="old_pass flex">
        <div
          v-for="(list,index) in oldPhone_list"
          :key="index"
          :class="active_oldPhone==list.id?'activeBg_p':''"
          @click="click_toggle2(list.id)"
        >{{list.name}}</div>
      </div>
      <p class="old_phone" v-if="active_oldPhone==0">
        已验证手机：
        <span style="color:#2D3AE9;">{{phone}}</span>
      </p>
      <div class="old_pass_input" style="margin-top:29px;" v-if="active_oldPhone==1">
        <input type="text" placeholder="请输入您的新手机号" v-model="new_phone" />
      </div>
      <div class="old_pass_input flex" v-if="active_oldPhone==0||active_oldPhone==1">
        <input type="text" placeholder="请输入图形码" v-model="old_phone_code" />
        <div @click="refreshCode" class="code_img">
          <SIdentify :identifyCode="identifyCode"></SIdentify>
        </div>
      </div>
      <div class="old_pass_input flex" v-if="active_oldPhone==0" style="border:none;">
        <input type="text" placeholder="请输入短信验证码" v-model="old_phone_yanzheng" class="code_input" />
        <button @click="getCode" :disabled="is_old_btn">{{code}}</button>
      </div>
      <div class="old_pass_input flex" v-if="active_oldPhone==1" style="border:none;">
        <input type="text" placeholder="请输入短信验证码" v-model="new_phone_yanzheng" class="code_input" />
        <button @click="getCode2" :disabled="is_old_btn">{{code}}</button>
      </div>
      <div class="old_pass_input" v-if="active_oldPhone==1">
        <input type="password" placeholder="请输入密码" v-model="new_phone_pass" />
      </div>
      <div
        class="sumbit_pass"
        @click="sumbit_phone"
        v-if="active_oldPhone==0||active_oldPhone==1"
      >提交</div>
      <div class="edit_success" v-if="active_oldPhone==2">
        <img src="../../assets/edit_over.png" alt />
        <p>手机号修改成功</p>
      </div>
      <div class="pass_tip">遇到问题，可拨打客服电话：400-995-1919</div>
    </div>
    <!-- 地址 -->
    <div class="address" v-if="active_id==1">
      <div class="addr_cont" v-loading="loading">
        <div class="add_list" @click="add_addr">新增收货地址</div>
        <ul class="add_list_ul">
          <li class="flex add_list_li" v-for="(list,index) in addressList" :key="index">
            <div
              class="li_a"
            >{{list.addr}}&nbsp;&nbsp;({{list.name}}&nbsp;&nbsp;收)&nbsp;&nbsp;{{list.phone}}</div>
            <div class="li_b flex">
              <p @click="amend(list)">修改&nbsp;&nbsp;|&nbsp;&nbsp;</p>
              <p @click="delate(list.id)">删除</p>
            </div>
            <div class="li_c" @click="isdefu(list.id)">{{list.isdefault}}</div>
          </li>
        </ul>
      </div>
      <div class="modal_delate">
        <el-dialog :visible.sync="modelDelate" width="338px" title="删除">
          <span class="delate_con">您确定要删除该收货地址吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="delateSure()">确 定</el-button>
            <el-button @click="modelDelate = false">取 消</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="modal_amend">
        <el-dialog :visible.sync="modelAmend" width="680px" :title="istitle">
          <div class="amend_con">
            <div class="amend_name">
              <p class="amens_p">收货人:</p>
              <input type="text" v-model="s_name" />
            </div>
            <div class="amend_name">
              <p class="amens_p">手机号码:</p>
              <input type="text" v-model="s_phone" />
            </div>
            <div class="amend_detailaera">
              <p class="amens_p">详细地址:</p>
              <input type="text" v-model="d_address" />
            </div>
            <div class="amend_detailaera flex" style="margin-top:15px;" @click="moren">
              <p class="amens_p" style="margin-bottom:0px;">设置为默认地址:</p>
              <img
                src="../../assets/huiguanbi.png"
                alt
                style="width: 40px;margin-left:15px;"
                v-show="ismoren"
              />
              <img
                src="../../assets/gongdakai1.png"
                alt
                style="width: 45px;margin-left:15px;"
                v-show="!ismoren"
              />
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="amendSure()">保存收货地址</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ykUserAddr,
  removeAddr,
  addAddr,
  editAddr,
  editpassword,
  send_message,
  editphone
} from "../../api/index.js";
import options from "../../../static/country-data.js";
import SIdentify from "../identify"; //注意引入路径
export default {
  props: {},
  data() {
    return {
      list_nav: [
        {
          id: 0,
          name: "账号设置"
        },
        {
          id: 1,
          name: "收货地址"
        }
      ],
      active_id: 0,
      phone: "",
      ishowLi: false, //判断是否点击修改
      editpass: false, //修改密码
      editphone: false, //修改手机号
      identifyCodes: "1234567890",
      identifyCode: "", //原密码随机码
      oldPass_list: [
        {
          id: 0,
          name: "1.输入原密码"
        },
        {
          id: 1,
          name: "2.重置密码"
        },
        {
          id: 2,
          name: "3.成功"
        }
      ],
      active_oldPass: 0, //原始密码进行中
      online_code: "", //生成的code
      old_pass: "", //旧密码
      old_pass_code: "", //旧密码的图形码
      new_pass: "", //新密码
      oldPhone_list: [
        {
          id: 0,
          name: "1.验证身份"
        },
        {
          id: 1,
          name: "2.新手机号"
        },
        {
          id: 2,
          name: "3.成功"
        }
      ],
      active_oldPhone: 0, //原始手机号进行中
      old_phone: "", //旧手机号
      old_phone_code: "", //旧手机号的图形码
      new_phone: "", //新手机号
      yanzheng: "", //验证码
      old_phone_yanzheng: "", //旧手机号验证码
      new_phone_yanzheng: "", //新手机号验证码
      code: "获取验证码",
      is_old_btn: false,
      timer: null,
      new_phone_pass: "",
      //地址
      addressList: [],
      loading: true,
      modelDelate: false, //删除弹窗
      delate_id: "", //删除id
      modelAmend: false, //修改弹窗
      address: options,
      d_address: "", //详细地址
      s_name: "", //收货人
      s_phone: "", //收货手机号
      isaddr: "", //0 是添加 1是修改
      editid: "", //修改的id
      istitle: "",
      userid: "",
      ismoren: true //是否是默认地址
    };
  },
  computed: {},
  created() {},
  mounted() {
    let aaa = localStorage.getItem("YKuserphone");
    this.phone = aaa.slice(0, 3) + "****" + aaa.slice(7,13);
    this.userid = localStorage.getItem("YKuserid");
    this.post();
    this.$parent.activeItem();
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4); //原始密码图形码
  },
  watch: {},
  methods: {
    toggle(id) {
      this.active_id = id;
      this.ishowLi = false;
      this.editpass = false;
      this.editphone = false;
      this.active_oldPass = 0;
      this.active_oldPhone = 0;
      if (this.timer != null) {
        clearInterval(this.timer);
      }
      this.code = "获取验证码";
      this.is_old_btn = false;
    },
    click_toggle() {
      if (this.active_oldPass == 1) {
        this.active_oldPass = 0;
        this.online_code = ""; //生成的code
        this.old_pass = ""; //旧密码
        this.old_pass_code = ""; //旧密码的图形码
        this.new_pass = ""; //新密码
        this.refreshCode();
      }
    },
    click_toggle2() {
      if (this.active_oldPhone == 1) {
        this.active_oldPhone = 0;
        this.old_phone = ""; //旧手机号
        this.old_phone_code = ""; //旧手机号的图形码
        this.new_phone = ""; //新手机号
        this.yanzheng = ""; //验证码
        this.old_phone_yanzheng = ""; //旧手机号验证码
        this.new_phone_yanzheng = ""; //新手机号验证码
        this.new_phone_pass = "";
        this.refreshCode();
      }
      if (this.timer != null) {
        clearInterval(this.timer);
      }
      this.code = "获取验证码";
      this.is_old_btn = false;
    },
    //密码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      this.online_code = this.identifyCode;
    },
    editpasss() {
      this.editpass = true;
      this.editphone = false;
      this.ishowLi = true;
    },
    editphonee() {
      this.editpass = false;
      this.editphone = true;
      this.ishowLi = true;
    },
    //提交旧密码
    sumbit_pass() {
      if (this.active_oldPass == 0) {
        if (this.old_pass == "" || this.old_pass_code == "") {
          this.$message({
            info: "error",
            message: "请填写完整内容"
          });
        } else if (this.old_pass_code != this.online_code) {
          this.$message({
            info: "error",
            message: "图形码错误"
          });
          this.old_pass_code = "";
          this.online_code = "";
          this.refreshCode();
        } else {
          this.active_oldPass = 1;
          this.old_pass_code = "";
          this.online_code = "";
          this.refreshCode();
        }
      } else if (this.active_oldPass == 1) {
        if (this.new_pass == "" || this.old_pass_code == "") {
          this.$message({
            info: "error",
            message: "请填写完整内容"
          });
        } else if (this.old_pass_code != this.online_code) {
          this.$message({
            info: "error",
            message: "图形码错误"
          });
          this.old_pass_code = "";
          this.online_code = "";
          this.refreshCode();
        } else {
          let msg = {
            phone: localStorage.getItem("YKuserphone"),
            oldpassword: this.old_pass,
            password: this.new_pass
          };
          editpassword(this.qs(msg))
            .then(res => {
              if (res.data.code == 0) {
                this.active_oldPass = 2;
                this.old_pass_code = "";
                this.online_code = "";
                this.refreshCode();
              } else {
                this.$message({
                  info: "error",
                  message: res.data.msg
                });
              }
            })
            .catch(e => {});
        }
      }
    },
    getCode() {
      let that = this;
      that.code = 60;
      that.is_old_btn = true;
      that.timer = setInterval(() => {
        that.code = that.code - 1;
        if (that.code < 1) {
          clearInterval(that.timer);
          that.code = "获取验证码";
          that.is_old_btn = false;
        }
      }, 1000);
      let msg = {
        mobile: localStorage.getItem("YKuserphone")
      };
      send_message(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            that.yanzheng = res.data.msg;
          } else {
            clearInterval(that.timer);
            that.code = "获取验证码";
            that.is_old_btn = false;
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
        })
        .catch(e => {});
    },
    getCode2() {
      if (this.new_phone == "") {
        this.$message({
          info: "error",
          message: "请填写新手机号"
        });
        return;
      }

      var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
      if (!reg.test(this.new_phone)) {
        this.$message({
          type: "error",
          message: "手机号格式不正确"
        });
        return;
      }
      let that = this;
      that.code = 60;
      that.is_old_btn = true;
      that.timer = setInterval(() => {
        that.code = that.code - 1;
        if (that.code < 1) {
          clearInterval(that.timer);
          that.code = "获取验证码";
          that.is_old_btn = false;
        }
      }, 1000);
      let msg = {
        mobile: this.new_phone
      };
      send_message(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            that.yanzheng = res.data.msg;
          } else {
            clearInterval(that.timer);
            that.code = "获取验证码";
            that.is_old_btn = false;
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
        })
        .catch(e => {});
    },
    //提交手机号
    sumbit_phone() {
      if (this.active_oldPhone == 0) {
        if (this.old_phone_code == "" || this.old_phone_yanzheng == "") {
          this.$message({
            info: "error",
            message: "请填写完整内容"
          });
        } else if (this.old_phone_code != this.online_code) {
          this.$message({
            info: "error",
            message: "图形码错误"
          });
          this.old_phone_code = "";
          this.online_code = "";
          this.refreshCode();
        } else if (this.yanzheng != this.old_phone_yanzheng) {
          this.$message({
            info: "error",
            message: "验证码错误"
          });
          this.yanzheng = "";
          this.old_phone_yanzheng = "";
        } else {
          this.yanzheng = "";
          this.active_oldPhone = 1;
          this.old_phone_code = "";
          this.online_code = "";
          clearInterval(this.timer);
          this.code = "获取验证码";
          this.is_old_btn = false;
          this.refreshCode();
        }
      } else if (this.active_oldPhone == 1) {
        if (
          this.new_phone == "" ||
          this.new_phone_yanzheng == "" ||
          this.old_phone_code == "" ||
          this.new_phone_pass == ""
        ) {
          this.$message({
            info: "error",
            message: "请填写完整内容"
          });
        } else if (this.old_phone_code != this.online_code) {
          this.$message({
            info: "error",
            message: "图形码错误"
          });
          this.old_phone_code = "";
          this.online_code = "";
          this.refreshCode();
        } else if (this.yanzheng != this.new_phone_yanzheng) {
          this.$message({
            info: "error",
            message: "验证码错误"
          });
          this.yanzheng = "";
          this.new_phone_yanzheng = "";
        } else {
          let msg = {
            phone: this.new_phone,
            oldphone: localStorage.getItem("YKuserphone"),
            password: this.new_phone_pass
          };
          editphone(this.qs(msg))
            .then(res => {
              if (res.data.code == 0) {
                this.yanzheng = "";
                this.active_oldPhone = 2;
                this.old_phone_code = "";
                this.online_code = "";
                clearInterval(this.timer);
                this.code = "获取验证码";
                this.is_old_btn = false;
                this.$parent.post();
                this.$parent.toheader();
              } else {
                this.$message({
                  info: "error",
                  message: res.data.msg
                });
              }
            })
            .catch(e => {});
        }
      }
    },
    // 地址
    post() {
      let msg = {
        userId: this.userid
      };
      ykUserAddr(this.qs(msg))
        .then(res => {
          // console.log(res);
          for (let i = 0; i < res.data.rows.length; i++) {
            if (res.data.rows[i].isdefault == "1") {
              res.data.rows[i].isdefault = "默认地址";
            } else {
              res.data.rows[i].isdefault = "设为默认";
            }
          }
          this.addressList = res.data.rows;
          this.loading = false;
        })
        .catch(e => {});
    },
    //删除
    delate(id) {
      this.modelDelate = true;
      this.delate_id = id;
    },
    delateSure() {
      let msg = {
        ids: this.delate_id
      };
      removeAddr(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          if (res.data.code == 0) {
            this.post();
          }
          this.modelDelate = false;
        })
        .catch(e => {});
    },
    //修改
    amend(item) {
      //   console.log(item)
      this.modelAmend = true;
      this.isaddr = "1";
      this.d_address = item.addr;
      this.s_name = item.name;
      this.s_phone = item.phone;
      this.editid = item.id;
      this.istitle = "编辑收货地址";
      if (item.isdefault == "设为默认") {
        this.ismoren = true;
      } else {
        this.ismoren = false;
      }
    },
    amendSure() {
      var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
      if (this.s_name && this.s_phone && this.d_address) {
        if (!reg.test(this.s_phone)) {
          this.$message({
            type: "error",
            message: "手机号格式不正确"
          });
          return;
        }
        let isde;
        if (this.ismoren == true) {
          isde = 0;
        } else if (this.ismoren == false) {
          isde = 1;
        }
        let addmsg = {
          name: this.s_name,
          phone: this.s_phone,
          addr: this.d_address,
          isdefault: isde,
          userId: this.userid,
          id: this.editid || ""
        };
        if (this.isaddr == "0") {
          //添加地址
          addAddr(this.qs(addmsg))
            .then(res => {
              this.$message({
                type: "info",
                message: res.data.msg
              });
              if (res.data.code == 0) {
                this.post();
              }
              this.modelAmend = false;
            })
            .catch(e => {});
        } else if (this.isaddr == "1") {
          editAddr(this.qs(addmsg))
            .then(res => {
              this.$message({
                type: "info",
                message: res.data.msg
              });
              if (res.data.code == 0) {
                this.post();
              }
              this.modelAmend = false;
            })
            .catch(e => {});
        }
        this.d_address = "";
        this.s_name = "";
        this.s_phone = "";
      } else {
        this.$message({
          type: "error",
          message: "所有内容不能为空"
        });
      }
    },
    //新增收货地址
    add_addr() {
      this.modelAmend = true;
      this.isaddr = "0";
      this.istitle = "添加收货地址";
      this.d_address = "";
      this.s_name = "";
      this.s_phone = "";
      this.ismoren = true;
    },
    //设为默认
    isdefu(id) {
      let msg = {
        id: id,
        isdefault: "1"
      };
      editAddr(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          if (res.data.code == 0) {
            this.post();
          }
        })
        .catch(e => {});
    },
    moren() {
      this.ismoren = !this.ismoren;
    }
  },
  components: { SIdentify }
};
</script>

<style scoped>
.account {
  padding-bottom: 50px;
}
.account_nav {
  margin: 0 22px;
  border-bottom: 1px solid #57595e;
}
.account_nav > p {
  font-size: 18px;
  color: rgba(51, 51, 51, 1);
  height: 48px;
  line-height: 64px;
  cursor: pointer;
}
.account_nav > p:nth-child(2) {
  margin-left: 142px;
}
.active_nav {
  color: #c9a650 !important;
  font-weight: bold;
}
/* 账号安全 */
.accont_cont > div {
  margin-top: 30px;
}
.accont_cont > div > div {
  font-size: 14px;
  color: #dfd4d4;
}
.accont_cont > div > div > img {
  width: 14px;
  height: 14px;
  margin-right: 7px;
}
.accont_cont > div {
  padding-left: 72px;
  padding-right: 54px;
  justify-content: space-between;
}
.accont_cont > div > p {
  color: #c9a650;
  font-size: 14px;
  cursor: pointer;
}
.accont_cont2 {
  width: 690px;
  margin: 0 auto;
  margin-top: 31px;
}
.old_pass > div {
  width: 231px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  background: url(../../assets/account_bg2.png) no-repeat;
  background-size: 100% 100%;
}
.old_pass > div:nth-child(1) {
  cursor: pointer;
}
.activeBg_p {
  background: url(../../assets/account_bg1.png) no-repeat !important;
  color: #fff !important;
}
.old_pass_input {
  width: 380px;
  height: 41px;
  border: 1px solid #57595e;
  margin: 0 auto;
  justify-content: space-between;
  margin-top: 19px;
}
.old_pass_input > input {
  height: 100%;
  width: 260px;
  border: none;
  outline: none;
  background: none;
  padding-left: 12px;
  color: #dfd4d4;
}
.code_input {
  border: 1px solid #57595e !important;
}
.code_img {
  width: 104px;
  height: 38px;
}
.sumbit_pass {
  width: 380px;
  height: 41px;
  background: #c9a650;
  margin: 0 auto;
  margin-top: 38px;
  margin-bottom: 58px;
  font-size: 14px;
  text-align: center;
  line-height: 41px;
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
}
.pass_tip {
  font-size: 16px;
  text-align: center;
  color: #dfd4d4;
}
.edit_success {
  margin-bottom: 58px;
}
.edit_success > img {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  margin-bottom: 25px;
  margin-top: 64px;
}
.edit_success > p {
  font-size: 14px;
  text-align: center;
  color: rgba(51, 51, 51, 1);
}
/* 手机号 */
.old_phone {
  font-size: 14px;
  width: 380px;
  margin: 0 auto;
  color: rgba(51, 51, 51, 1);
  margin-top: 48px;
}
.old_pass_input > button {
  height: 100%;
  width: 106px;
  border: none;
  outline: none;
  background: #ececec;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  color: rgba(153, 153, 153, 1);
}
.code_input {
  border: 1px solid rgba(221, 221, 221, 1) !important;
}
/* 地址 */
.add_list {
  margin-left: 30px;
  margin-top: 20px;
  width: 109px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid rgba(216, 20, 23, 1);
  font-size: 14px;
  color: rgba(216, 20, 23, 1);
  cursor: pointer;
}
.add_list_ul {
  width: 975px;
  margin-left: 26px;
  padding-bottom: 30px;
}
.add_list_li {
  cursor: pointer;
  height: 97px;
  border-bottom: 2px solid #d6d2d2;
  padding: 0 6px;
}
.add_list_li > div {
  letter-spacing: 0.5px;
  font-size: 14px;
  color: #333;
}
.li_a {
  width: 80%;
  margin-right: 10px;
}
.li_b,
.li_c {
  width: 112px;
  text-align: center;
}
.li_c {
  margin-left: 129px;
  border: 1px solid #fff;
}
.li_c:hover {
  width: 112px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: rgba(252, 203, 203, 1);
  border: 1px solid rgba(216, 20, 23, 1);
  border-radius: 5px;
  color: rgba(216, 20, 23, 1);
}
.li_b > p:hover {
  color: rgba(216, 20, 23, 1);
}
.modal_delate >>> .el-dialog,
.modal_amend >>> .el-dialog {
  border-radius: 10px !important;
  margin-top: 297px !important;
}
.modal_delate >>> .el-dialog__header,
.modal_amend >>> .el-dialog__header {
  height: 38px;
  background: rgba(253, 224, 225, 1);
  border-radius: 10px 10px 0px 0px;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.modal_amend >>> .el-dialog__header {
  margin-bottom: 10px;
}
.modal_delate >>> .el-dialog__headerbtn,
.modal_amend >>> .el-dialog__headerbtn {
  top: 10px !important;
}
.modal_delate >>> .el-dialog__title,
.modal_amend >>> .el-dialog__title {
  font-size: 14px !important;
  color: rgba(51, 51, 51, 1) !important;
  margin-left: 18px;
}
.delate_con {
  font-size: 14px !important;
  color: rgba(51, 51, 51, 1) !important;
}
.modal_delate >>> .el-dialog__body {
  text-align: center !important;
  padding: 41px 0 !important;
}
.modal_delate >>> .el-dialog__footer {
  padding: 0px 32px 26px 32px !important;
}
.modal_amend >>> .el-dialog__footer {
  padding: 0px 0px 58px 61px !important;
}
.modal_delate >>> .dialog-footer,
.modal_amend >>> .dialog-footer {
  display: block !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}
.modal_delate >>> .dialog-footer > button,
.modal_amend >>> .dialog-footer > button {
  height: 40px !important;
  border-radius: 3px !important;
  color: rgba(51, 51, 51, 1) !important;
  background-color: rgba(237, 237, 237, 1) !important;
  border-color: rgba(153, 153, 153, 1) !important;
  font-size: 16px !important;
}
.modal_delate >>> .dialog-footer > button {
  width: 83px !important;
}
.modal_amend >>> .dialog-footer > button {
  width: 145px !important;
}
.modal_amend >>> .el-dialog__body {
  padding: 23px 61px !important;
}
.amens_p {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 13px;
}
.amend_name > input,
.amend_detailaera > input {
  height: 40px;
  border: 1px solid rgba(153, 153, 153, 1);
  background: #fff;
  padding-left: 10px;
  font-size: 14px;
  color: #333;
}
.amend_name > input {
  width: 247px;
  margin-bottom: 15px;
}
.amend_detailaera > input {
  width: 461px;
}
</style>
